<!-- 动态详情页 -->
<template>
	<view class="content">
		<Header :isShowRight="false" title="动态" @back='back' arrowColor='#000' textColor='#000' bgColor='#fff'></Header>
		<view style="height: 96rpx;background:transparent"></view>
		<!-- #ifdef APP-PLUS -->
		<view style="height: 24rpx;">
			
		</view>
		<!-- #endif -->
		<view class="reply_user">
			<avatar class="avatar" :src="info.headPortrait"></avatar>
			<view class="rightbox">
				<view>{{info.nickName}}</view>
				<view class="reply_time">
					<text>{{info.msType || info.title}}</text>
					<view>{{info.createTime}}</view>
				</view>
				<view class="info_content">{{info.replay}}</view>
				<text @click="goOrign">查看原文>></text>
			</view>
		</view>
		<view class="send_user">
			<avatar class="avatar" :src="user.headPortrait"></avatar>
			<view class="rightbox">
				<view>{{user.nickName}}</view>
				<view class="reply_time">
					<text>我的内容</text>
					<view>{{info.createTime}}</view>
				</view>
				<view class="info_content">{{info.content}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setMessageRead,
		messageDynamicDetail,
		getUserData,
		topicDetail
	} from '@/apis/apis.js'
	import avatar from '@/components/avatar.vue'
	import Header from '@/components/c_header.vue'
	export default {
		components: {
			avatar,
			Header
		},
		data() {
			return {
				id: "",
				info: {},
				user: {},
				//模拟动态详情页面
				flag:-1,
				timer:null
			}
		},
		onLoad(options) {
			// console.log(options)
			this.id = options.id ? options.id : ''
			this.flag = options.flag ? options.flag : -1
			this.init()
			if (options.flag == 0) {
				this.setDoneApi()
			}
		},
		methods: {
			init() {
				messageDynamicDetail(this.id).then(res => {
					console.log('detail', res)
					// serviceType 1：订单, 2：话题，3：话题评论，4：课程，5：课程评论
					const i = res.data.title.indexOf('：')
					console.log(i)
					if(i!=-1){
					res.data.msType = res.data.title.substring(0, i)
					res.data.replay = res.data.title.substring(i + 1)
					}
					this.info = res.data
				})
				getUserData().then(res => {
					this.user = res.data
				})
			},
			back(){
				this.timer=setTimeout(()=>{
					uni.navigateBack()
				},500)
				//判定是否已读
				let isRead= this.flag == 0 ? true : false
				const pages=getCurrentPages()
				const prevPage=pages[pages.length-2]
				prevPage.$vm.sendValue(isRead)
			},
			// 设置为已读
			setDoneApi() {
				setMessageRead({
					messageIds: this.id
				}).then(res => {
					// console.log(res)
				})
			},
			//查看原文事件
			goOrign() {
				this.isDelete()
			},
			//查看原文跳转的话题是否删除
			isDelete(){
				topicDetail(this.info.serviceId).then(res=>{
					if(res.code==200){
						//话题未删除，可以跳转话题详情
						uni.navigateTo({
							url: '/pages/topic/topicDetail/topicDetail?id=' + this.info.serviceId
						})
					}else{
						return
					}
				})
			}
		},
        onUnload() {
        	if(this.timer){
				clearTimeout(this.timer)
				this.timer=null
			}
        }
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		// height: 100vh;
		background: #F4F4F4;
		.reply_user,
		.send_user {
			background: #fff;
			border-top: 2rpx solid rgba(215, 215, 215, .5);
			margin-bottom: 14rpx;
			padding: 36rpx 34rpx 42rpx 30rpx;
			display: flex;

			&>image {
				width: 78rpx;
				height: 78rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.rightbox {
				color: #373737;
				font-size: 28rpx;

				.reply_time {
					font-size: 26rpx;
					color: #B7B7BE;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 22rpx 0 26rpx 0;

					&>text {
						color: #828282;
					}
				}

				.info_content {
					width: 558rpx;
					line-height: 40rpx;
					margin-bottom: 30rpx;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					display: -moz-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					-moz-line-clamp: 3;
					-moz-box-orient: vertical;
				}

				&>text {
					color: #194FC9;
				}
			}

		}

		.send_user {
			background: #fff;
		}

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
		}
	}
</style>
